// 注释
/* 普通注释  会保留到编译后的文件中 */
// 静默注释  只保留在SASS源文件中，编译后被省略。


// 变量
// 变量名以$开头(变量:值;)  
// 解析: 在scss文件中可以提前定义变量,存储公共数据 ,scss文件便以为css是 会被替换为对应的值

// 用法
// 1. 存储公共数据
// 2. 变量可以和 css选择器,css属性名,css属性值拼接(插值语句)

$hot: #f10215;
$grey: #999;
$success: #99CCCC;
$cool: #0099CC;
$warm: #FFCCCC;
$live: #FF9999;

$typeArea: 1226px; //版心宽度

$side: left;





// 计算 (+ - * / %)
// scss文件中可以进行数值运算 => 编译时会直接输出运算的结果

// 加法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 减法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 乘法: 一个有单位,一个没有单位  
// 除法: 一个有单位,一个没有单位  或者 两个都有单位(单位舍去 倍数  200px/2px => 100)


// 函数  => sass中允许自定义函数
@function pxtorem($val) {
    // @return calc($val/100px)*1rem;
    @return #{calc($val/100px)}rem;
}



body {
    // font: font-weight font-style  font-size/line-height  font-family;
    font: 14px/16px "宋体";
}

.box {
    width: 200px + 2px;
    width: 200px + 2;
    width: 200px - 2px;

    width: 200px * 2;
    // width: 200px * 2px;   报错 => 400px*px

    // width: (200px / 2);  // 老版本写法
    width: calc(200px / 2); // 新版本写法 scss存在计算方法calc   
    width: calc(200px / 2px);

    width: pxtorem(750px);

    border: 1px solid $live;
}






.header {
    width: $typeArea;
    margin: 0 auto;
    height: 40px;
    background-color: $grey;
}


.nav li+li {
    border-#{$side}: 0;
}

.banner {
    width: $typeArea;
    margin: 0 auto;
}

.footer {
    width: $typeArea;
    margin: 0 auto;
}